﻿@{
    ViewBag.Title = "Home Page";
}

<style>
    .canvas {
        border: 1px solid rgb(170, 170, 170);
        cursor: pointer;
    }

    iframe {
        border: solid;
        border-color: blue;
        border-width: 1px;
    }
</style>

<script src="~/Scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="~/Scripts/jsrender.min.js"></script>
<script src="~/Scripts/layui/layui.js"></script>
<link href="~/Scripts/layui/css/layui.css" rel="stylesheet" />
<script src="~/Scripts/ext.js" type="text/javascript"></script>
<script src="~/Scripts/fabric.min.js"></script>
<script type="text/javascript">
    function ConvertFile() {
        $.ajax({
            method: "post",
            url: "/Home/ConvertPPt",
            success: function (data) {
                alert(data.message);
            }
        });
    }
    var navMenuList = "";
    function GetPPTResult() {
        $.ajax({
            method: "post",
            url: "/Home/GetPPTResult",
            success: function (data) {
                ppts = data;
                var html = $('#NavTemplate').render(data);
                $('#NavMenuList').html(html);
            }
        });
    }
    var pptIndex = 0;
    var ppts = [];

    function openPPT() {
        showFrame();
    }
    function up() {
        if (pptIndex > 0) {
            pptIndex -= 1;
        } else {
            pptIndex = 0;
        }
        showFrame();
    }
    function down() {
        if (pptIndex >= ppts.length) {
            pptIndex = ppts.length;
        }
        else {
            pptIndex += 1;
        }
        showFrame();
    }

    function showFrame() {
        if (ppts.length <= 0) {
            return;
        }
        $("#svgUrl").load(ppts[pptIndex].svg);
        if (remarkVisbile) {
            $('#RemarkDiv').html(ppts[pptIndex].remark);
        }

        setTimeout(function () {
            var svgElement = document.getElementById("svgUrl");
            for (var i = 0; i < svgElement.getElementsByTagName("a").length; i++) {
                var ee = svgElement.getElementsByTagName("a")[i];
                //获取超链接的子元素
                var linkName = "";
                for (var j = 0; j < ee.children.length; j++) {
                    linkName += ee.children[j].innerHTML;
                }
                if (ee.getAttribute("xlink:href")) {
                    ee.setAttribute("onclick", "showUrl('" + ee.getAttribute("xlink:href") + "','" + linkName + "');");
                    ee.setAttribute("xlink:href", "javascript:void(0)");
                }
            }
            /*  
            //进行全屏显示
            let clientWidth = $('#svgUrl').width(),
                clientHeight = $('#svgUrl').height();
            let x = 960;
            let y = 540;
            //获取image的宽度和高度
            var viewBox = $('#svgUrl svg').attr("viewBox");
            if (viewBox) {
                if (viewBox.split(" ").length == 4) {
                    x = viewBox.split(" ")[2];
                    y = viewBox.split(" ")[3];
                }
            }
            let widthScale = clientWidth / x,
                heightScale = clientHeight / y;

            // var transfromString = 'translate(' + (x * (widthScale - 1) / 2) + ',' + (y * (heightScale - 1) / 2) + ') scale(' + widthScale + ',' + heightScale + ')';
            var transfromString = 'scale(' + widthScale + ',' + heightScale + ')';
            //var transfromString = 'translate(' + (x * (widthScale - 1) / 2) + ',' + (y * (heightScale - 1) / 2) + ')';
            $('#svgUrl svg').attr("transform", transfromString);
            */
            $('#svgUrl svg').removeAttr("width");
            $('#svgUrl svg').removeAttr("height");
        }, 100);
    }
    //==========================备注===============================
    var remarkVisbile = false;
    function RemarkVisible() {
        remarkVisbile = !remarkVisbile;
        if (remarkVisbile) {
            $('#RemarkDiv').html(ppts[pptIndex].remark);
            $('#RemarkDiv').css("display", "block");

        }
        else {
            $('#RemarkDiv').css("display", "none");
        }
    }

    //==========================导航===============================
    var navVisbile = false;
    function NavVisible() {
        navVisbile = !navVisbile;
        if (navVisbile) {
            $('#NavList').css("display", "block");
        }
        else {
            $('#NavList').css("display", "none");
        }
    }
    //点击导航
    function clickNav(index) {
        pptIndex = index;
        showFrame();
    }

    //============================================画图================================================
    $(function () {
        InitCancas();
    });
    var canvas;
    function InitCancas() {
        canvas = new fabric.Canvas("freeCanvas", {
            isDrawingMode: true,
            selection: false,
            width: 1500,
            height: 800
        });
    }
    //清除画板
    function clearCanvas() {
        canvas.clear();
    }

    function alertInfo() {
        alert("width:" + $('#svgUrl').width() + "  height:" + $('#svgUrl').height());
    }

    function WidthPlus() {
        let width = $('#svgUrl').width();
        $('#svgUrl').width(width+100);
    }
    function WidthSub() {
        let width = $('#svgUrl').width();
        $('#svgUrl').width(width-100);
    }
</script>
<div class="row">
    @*<div style="border:solid;border-color:black;border-width:1px">
            <canvas id="freeCanvas" width="1500" height="800" style="border:1px;border-color:black; border:solid" class="canvas">
            </canvas>
        </div>*@
    <button type="button" onclick="ConvertFile()">转换文件</button>
    <div id="ctrl" style="border:1px; border-color:red; border:solid">

        <!--备注-->
        <div id="RemarkDiv" style="border:solid;border-color:black;border-width:1px;display:none">
        </div>
        <!--导航-->
        <div id="NavList" style="border:solid;border-color:black;border-width:1px; display:none;overflow:auto;height:100px;">
            <ul id="NavMenuList">
                <script type="text/x-jsrender" id="NavTemplate">
                    <li onclick="clickNav('{{:index}}')">
                        <img src="{{:thumbnail}}" style="width:80px;height:60px;" />
                        <label> {{:title}} </label>
                    </li>
                </script>
            </ul>
        </div>
        <!--ppt控制条-->
        <div class="ctrl_bar">
            <button type="button" onclick="GetPPTResult()">1:转换结果</button>
            <button type="button" onclick="openPPT()">2:打开文件</button>
            <button type="button" onclick="up()">3:上一页</button>
            <button type="button" onclick="down()">4:下一页</button>
            <button type="button" onclick="RemarkVisible()">6:备注</button>
            <button type="button" onclick="NavVisible()">7:导航</button>
            <button type="button" onclick="clearCanvas()">8:清除画板</button>
            <button type="button" onclick="alertInfo()">9:提示div</button>
            <button type="button" onclick="WidthPlus()">10:宽度+</button>
            <button type="button" onclick="WidthSub()">11:宽度-</button>
        </div>
    </div>

    <div style="border:solid;border-color:red;border-width:1px; width:1500px;min-height:800px" id="svgUrl">

        <object type="image/svg+xml"
                codebase="http://www.adobe.com/svg/viewer/install/" />

    </div>

</div>